<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息卡</title>
</head>
<style>
    *{
    padding: 0;
    margin: 0;
    border: 0;
}
ol,ul,li{
	list-style: none;
}
a{
    text-decoration: none;
    font-family: '微软雅黑';
}
.clears{ clear:both;
    height:0;
    line-height:0;
    overflow:hidden;
    font-size:0;}
h3{
    display: block;
}
.content{
    width: 400px;
    border-bottom: #777777 solid 4px;
}
</style>
<body>
<div class="content">
    <div class="title">
        <h1>用户信息卡</h1>
    </div>
    
        <p>姓名:</p><input type="text" placeholder="输入你的姓名" id="name">
        <p>EMAIL:</p><input type="email" placeholder="输入邮箱" id="email">
        <p>电话号码:</p><input type="text" placeholder="输入电话号码" id="phone">
        <p>说明:</p><input type="text" placeholder="说明" id="explain">
        </br><button onclick="saveData()">保存<tton>
</div>
<div id="detail">
    <p>查询：<input type="text" id="query" placeholder="按姓名查询"></p>
    <p><input type="button" value="查询" onclick="queryData()"></p>
</div>

<script>
    let name = document.querySelector("#name")
    let email =document.querySelector("#email")
    let phone = document.querySelector("#phone")
    let explain = document.querySelector("#explain")     
    let query = document.querySelector("#query")
    let detail = document.querySelector("#detail")
    function saveData(){
        console.log("保存数据")
        localStorage.setItem("name",name.value)
        localStorage.setItem("email",email.value)
        localStorage.setItem("phone",phone.value)
        localStorage.setItem("explain",explain.value)
    }
    function queryData() {
            if (query.value===localStorage.name) {
                detail.innerHTML='姓名'+localStorage.getItem('name')+"<br/>"+
                "EMAIl："+localStorage.email+"<br/>"+
                "电话号码:"+localStorage.phone+"<br/>"+
                "说明："+localStorage.explain
            }else{
                alert('查无此人')
            }
        }
    
</script>
</body>

</html>